<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统 - 教师列表</title>
    <link href="/static/css/layui.css" rel="stylesheet">
    <style>
        #pagination {
            margin-top: 10px;
            margin-bottom: 25px;
            text-align: center;
        }

        .layui-card {
            margin: 10px;
        }

        table {
            width: 100%;
        }

        .layui-col-space16>div {
            margin-bottom: 10px;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
        }

        .button-container button {
            flex: 1;
            margin-right: 10px;
        }

        .button-container button:last-child {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <div class="layui-card">
        <div class="layui-card-header">教师列表</div>
        <div class="layui-card-body">
            <div class="layui-form layui-row layui-col-space16">
                <!-- 筛选区域 -->
                <div class="layui-col-md4">
                    <label for="grade-input">输入年级：</label>
                    <input type="text" id="grade-input" class="layui-input" placeholder="请输入年级">
                </div>
                <div class="layui-col-md4">
                    <label for="major-input">输入专业：</label>
                    <input type="text" id="major-input" class="layui-input" placeholder="请输入专业">
                </div>
                <div class="layui-col-md4">
                    <label for="class-input">输入班级：</label>
                    <input type="text" id="class-input" class="layui-input" placeholder="请输入班级">
                </div>
                <div class="layui-col-md12">
                    <div class="button-container">
                        <button id="filter-button" class="layui-btn layui-btn-fluid">筛选</button>
                        <button id="delete-button" class="layui-btn layui-btn-danger layui-btn-fluid">删除</button>
                    </div>
                </div>
            </div>

            <br>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="select-all" lay-skin="primary" lay-filter="select-all" title="全选">
                        </th>
                        <th>教师ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>年级</th>
                        <th>专业</th>
                        <th>班级</th>
                    </tr>
                </thead>
                <tbody id="teacher-table-body">
                    <!-- 教师数据将动态插入到这里 -->
                </tbody>
            </table>

            <div id="pagination"></div>
        </div>
    </div>

    <script>
        layui.use(['jquery', 'form', 'laypage'], function () {
            var $ = layui.$;
            var form = layui.form;
            var laypage = layui.laypage;

            function loadTeachers(page = 1, perPage = 10, grade = "", major = "", className = "") {
                let query = $.param({
                    page: page,
                    per_page: perPage,
                    grade: grade,
                    major: major,
                    class_name: className
                });

                $.ajax({
                    url: '/teachers?' + query,
                    method: 'GET',
                    success: function (data) {
                        var tbody = $('#teacher-table-body');
                        tbody.empty();

                        data.teachers.forEach(function (teacher) {
                            var row = `
                                <tr>
                                    <td><input type="checkbox" class="teacher-checkbox" lay-skin="primary" title="选择"></td>
                                    <td>${teacher.teacher_id}</td>
                                    <td>${teacher.name}</td>
                                    <td>${teacher.age}</td>
                                    <td>${teacher.gender}</td>
                                    <td>${teacher.grade}</td>
                                    <td>${teacher.major}</td>
                                    <td>${teacher.class_name}</td>
                                </tr>`;
                            tbody.append(row);
                        });

                        laypage.render({
                            elem: 'pagination',
                            count: data.total,
                            limit: perPage,
                            curr: page,
                            jump: function (obj, first) {
                                if (!first) {
                                    loadTeachers(obj.curr, perPage, grade, major, className);
                                }
                            }
                        });

                        form.render();
                    },
                    error: function (xhr, status, error) {
                        console.error('加载教师数据失败:', error);
                    }
                });
            }

            $('#filter-button').click(function () {
                var grade = $('#grade-input').val(); // 获取年级
                var major = $('#major-input').val();
                var className = $('#class-input').val();
                loadTeachers(1, 10, grade, major, className); // 将年级传递给loadTeachers函数
            });

            $('#delete-button').click(function () {
                var selectedIds = [];
                $('.teacher-checkbox:checked').each(function () {
                    var row = $(this).closest('tr');
                    var teacherId = row.find('td:nth-child(2)').text();
                    selectedIds.push(teacherId);
                });

                if (selectedIds.length === 0) {
                    layer.msg('请至少选择一个教师进行删除！');
                    return;
                }

                layer.confirm('确定要删除所选教师吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: '/delete_teachers',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({ ids: selectedIds }),
                        success: function (response) {
                            layer.msg('删除成功！');
                            loadTeachers();
                        },
                        error: function (xhr, status, error) {
                            console.error('删除教师失败:', error);
                            layer.msg('删除失败，请重试！');
                        }
                    });
                }, function () {
                    layer.msg('已取消删除操作');
                });
            });

            loadTeachers();

            $('#select-all').click(function () {
                var isChecked = $(this).is(':checked');
                $('.teacher-checkbox').prop('checked', isChecked);
                form.render('checkbox');
            });
        });
    </script>
</body>

</html>
